<template>
  <RouterView>
    <template #default="{ Component, route }">
      <Header :class="`${prefixCls}-header`">
        <div :class="`${prefixCls}-left`">
          <!-- logo -->
          <AppLogo :class="`${prefixCls}-logo`" style="width: 48px" :publicConfig="publicConfig" />
        </div>
      </Header>
      <Layout :class="`${prefixCls}-main`">
        <keep-alive v-if="openCache" :include="getCaches">
          <div :class="`${prefixCls}-main`">
            <component :is="Component" :key="route.fullPath" />
          </div>
        </keep-alive>
        <component v-else :is="Component" :key="route.fullPath" />

        <LayoutFooter />
      </Layout>
    </template>
  </RouterView>
  <FrameLayout v-if="getCanEmbedIFramePage" />
</template>

<script lang="ts">
  import { computed, defineComponent, unref } from "vue"
  import { createAsyncComponent } from "/@/utils/factory/createAsyncComponent"

  import FrameLayout from "/@/layouts/iframe/index.vue"
  import { AppLogo } from "/@/components/Application"
  import { useRootSetting } from "/@/hooks/setting/useRootSetting"
  import { Layout } from "ant-design-vue"
  import { useDesign } from "/@/hooks/web/useDesign"
  import { useTransitionSetting } from "/@/hooks/setting/useTransitionSetting"
  import { useMultipleTabSetting } from "/@/hooks/setting/useMultipleTabSetting"
  import { getTransitionName } from "./transition"

  import { useMultipleTabStore } from "/@/store/modules/multipleTab"
  import { useIamStore } from "/@/store/modules/iam"
  export default defineComponent({
    name: "SimpleLayout",
    components: {
      FrameLayout,
      Header: Layout.Header,
      AppLogo,
      Layout,
      LayoutFooter: createAsyncComponent(() => import("/@/layouts/simple/footer/index.vue")),
    },
    setup() {
      const { getShowMultipleTab } = useMultipleTabSetting()
      const tabStore = useMultipleTabStore()
      const { prefixCls } = useDesign("simple-layout")
      const publicConfig = useIamStore().getAppPublicConfig

      const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting()

      const { getBasicTransition, getEnableTransition } = useTransitionSetting()

      const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab))

      const getCaches = computed((): string[] => {
        if (!unref(getOpenKeepAlive)) {
          return []
        }
        return tabStore.getCachedTabList
      })

      return {
        publicConfig,
        prefixCls,
        getTransitionName,
        openCache,
        getEnableTransition,
        getBasicTransition,
        getCaches,
        getCanEmbedIFramePage,
      }
    },
  })
</script>

<style lang="less">
  // @import './index.less';
  // 默认隐藏顶部菜单面包屑
  //顶部欢迎语展示样式
  @prefix-cls: ~"@{namespace}-simple-layout";

  .@{prefix-cls} {
    &-main {
      height: calc(100vh - 64px);
    }

    &-header {
      display: flex;
      padding: 0 8px;
      align-items: center;
      background-color: #ffffff;

      .headerIntroductionClass {
        margin-right: 4px;
        margin-bottom: 2px;
        border-bottom: 0px;
        border-left: 0px;
      }
    }
  }
</style>
